<template>
	<view class="privacy_box">
		<view class="privacy_list_box w100">
			<view class="privacy_list_box_two w100">
				<view class="list_box_two flex flexjus" style="height: 148upx;" @click="edit">
					<view class="flex">
						<view class="edit_txt s28 f500 family">
							头像
						</view>
						<view class="toux_img">
							<image v-if="privacy.avatar != ''" class="image w100 h100" :src="privacy.avatar" mode="">
							</image>
							<image v-else class="image w100 h100" :src="privacy.avatar" mode=""></image>
						</view>
					</view>
					<view class="edit_icon">
						<image class="w100 h100" src="../static/right_hui_jian.png" mode=""></image>
					</view>
				</view>
				<view class="list_box_two h100 flex flexjus" style="border-bottom: 2upx solid #F1F1F1;">
					<view class="flex">
						<view class="edit_txt s28 f500 family" style="line-height: 90upx;">
							昵称
						</view>
						<input class="uni-input s26 family f500" v-model="privacy.nickname" @input="onKeyInput"
							placeholder="请输入新昵称" />
						<!-- <view class="edit_txt s26 f500 family"
							style="width: 230upx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 362upx;" v-if="toShow" @click="xianShi">
							{{user.nickname}}
						</view> -->
					</view>
					<view class="edit_icon" style="margin-top: 20upx;">
						<image class="w100 h100" src="../static/right_hui_jian.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="shiyong_box w100 flex">
				<view class="shuxian"></view>
				<view class="shiyong_txt s28 fblod familytow">
					使用场景
				</view>
			</view>
			<view class="list_box h100 flex flexjus" style="border-bottom: 2upx solid #F1F1F1;">
				<view class="edit_txt s28 f500 family">
					分享海报
				</view>
				<switch class="switch" color="#EBBE87" :checked="privacy.share" data-type="share"
					@change="onSwitch(1)" />
			</view>
			<view class="list_box h100 flex flexjus" style="border-bottom: 2upx solid #F1F1F1;">
				<view class="edit_txt s28 f500 family">
					排行榜
				</view>
				<switch class="switch" color="#EBBE87" :checked="privacy.rank" data-type="rank" @change="onSwitch(2)" />
			</view>
			<view class="list_box h100 flex flexjus" style="border-bottom: 2upx solid #F1F1F1;">
				<view class="edit_txt s28 f500 family">
					订单推荐
				</view>
				<switch class="switch" color="#EBBE87" :checked="privacy.recommand" data-type="recommand"
					@change="onSwitch(3)" />
			</view>
		</view>
		<view class="submit s28 fblod familytow txtali" @click="submit">
			确认修改
		</view>
		<view class="zhezhao" v-if="show">
			<view class="c_box">
				<view class="c_title txtali">
					隐私说明
				</view>
				<view class="c_txt">
					<rich-text :nodes="content"></rich-text>
				</view>
				<view class="btn_box flex">
					<view class="quxiao_btn s32 fblod familytow txtali" @click="onDisplay">
						取消
					</view>
					<view class="quxiao_btn_v s32 fblod familytow txtali" @click="goDetail">
						确定
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				privacy: {
					share: false,
					rank: false,
					recommand: false,
					avatar: '',
					nickname: '',
				},
				show: true,
				content: ''
			}
		},
		onLoad(e) {
			var that = this;
			// 获取默认privacy隐私信息
			if(uni.getStorageSync('userInfo').privacy){
				that.privacy = uni.getStorageSync('userInfo').privacy;
			}
			this.getText()
		},
		methods: {
			// 上传头像
			edit() {
				this.$upLoadImage().then(res => {
					this.privacy.avatar = res.fullurl
				}).catch(error => {
					return false
				})
			},
			onDisplay() {
				uni.navigateBack({})
			},
			// 获取隐私说明注释
			getText() {
				this.$request({
					url: 'common/config',
					method: 'POST',
					data: {
						keyword: 'privacy'
					}
				}).then(res => {
					this.content = res.data.data
				})
			},
			goDetail() {
				this.show = !this.show
			},
			// 设置switch状态返回参数
			onSwitch(type) {
				let that = this
				if (type == 1) {
					this.privacy.share = !this.privacy.share == true ? 1 : 0
				} else if (type == 2) {
					this.privacy.rank = !this.privacy.rank == true ? 1 : 0
				} else if (type == 3) {
					this.privacy.recommand = !this.privacy.recommand == true ? 1 : 0
				}
			},
			onKeyInput(e) {
				this.privacy.nickname = e.detail.value
			},
			// 提交修改数据
			submit() {
				if(this.privacy.avatar==''){
					uni.showToast({
						title:'请上传头像',
						icon:'none'
					})
					return;
				}
				if(this.privacy.nickname==''){
					uni.showToast({
						title:'请填写昵称',
						icon:'none'
					})
					return;
				}
				let that = this
				that.$request({
					url: 'member/privacySet',
					method: 'POST',
					data: {
						privacy: that.privacy
					}
				}).then(res => {
					if (res.data.code == 1) {
						uni.showToast({
							title: "修改成功",
							icon: 'none'
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},800)
						this.$getUserInfo()
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}
					
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.privacy_box {
		overflow: hidden;
		
		.privacy_list_box {
			.privacy_list_box_two {
				.list_box_two {
					width: 686upx;
					height: 108upx;
					padding-left: 32upx;
					padding-right: 32upx;

					.edit_txt {
						color: #000000;
						line-height: 148upx;
					}

					.uni-input {
						width: 220upx;
						height: 60upx;
						background-color: #F4F5F9;
						margin-top: 14upx;
						margin-left: 362upx;
						border: 16upx 16upx 16upx 16upx;
						padding-left: 20upx;
						display: block;
					}

					.toux_img {
						width: 96upx;
						height: 96upx;
						margin-left: 496upx;
						border-radius: 50%;
						margin-top: 20upx;

						.image {
							border-radius: 50%;
						}
					}

					.switch {
						margin-top: 20upx;
					}

					.edit_icon {
						width: 9upx;
						height: 18upx;
						margin-top: 46upx;
					}
				}

				.shiyong_box {
					height: 94upx;
					background: #F4F5F9;

					.shuxian {
						width: 8upx;
						height: 28upx;
						background-color: #EBBE87;
						margin-top: 34upx;
						margin-left: 32upx;
					}

					.shiyong_txt {
						color: #EBBE87;
						line-height: 94upx;
						margin-left: 6upx;
					}
				}
			}

			.list_box {
				width: 686upx;
				height: 108upx;
				padding-left: 32upx;
				padding-right: 32upx;

				.edit_txt {
					color: #000000;
					line-height: 108upx;
				}

				.switch {
					margin-top: 20upx;
				}

				.edit_icon {
					width: 9upx;
					height: 18upx;
					margin-top: 30upx;
				}
			}

			.shiyong_box {
				height: 94upx;
				background: #F4F5F9;

				.shuxian {
					width: 8upx;
					height: 28upx;
					background-color: #EBBE87;
					margin-top: 34upx;
					margin-left: 32upx;
				}

				.shiyong_txt {
					color: #EBBE87;
					line-height: 94upx;
					margin-left: 6upx;
				}
			}
		}

		.submit {
			width: 686upx;
			height: 88upx;
			background: #EBBE87;
			border-radius: 50upx;
			position: fixed;
			bottom: 150upx;
			left: 36upx;
			line-height: 88upx;
			color: #ffffff;
		}
		.zhezhao {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			position: fixed;
			z-index: 999;
			top: 0;
		
			.c_box {
				width: 624upx;
				background: #FFFFFF;
				border-radius: 32upx 32upx 32upx 32upx;
				margin: 40% auto;
				overflow: hidden;
		
				.c_title {
					font-size: 42upx;
					font-family: HYYakuHei-75W, HYYakuHei;
					font-weight: normal;
					color: #844902;
					margin-top: 64upx;
				}
		
				.c_txt {
					width: 550upx;
					height: 500upx;
					margin: 48upx auto;
					margin-bottom: 0;
				}
		
				.btn_box {
					margin-top: 40upx;
		
					.quxiao_btn {
						width: 312upx;
						height: 100upx;
						background: #CCCCCC;
						border-radius: 0upx 0upx 0upx 32upx;
						color: #FFFFFF;
						line-height: 100upx;
					}
		
					.quxiao_btn_v {
						width: 312upx;
						height: 100upx;
						background: #EBBE87;
						border-radius: 0upx 0upx 32upx 0upx;
						line-height: 100upx;
						color: #844902;
					}
				}
			}
		}
	}
</style>
